<template>
    <div class="count_class">
        <count-to ref="countTo" :end-val="endVal" :className="getClass">
            <span slot="left" class="prefix-style">总金额： </span>
            <span slot="right"> 元</span>
        </count-to>
        <br>
        <el-button type="primary" round @click="getNumber">获取数值</el-button>
        <el-button type="primary" round @click="updateVal">更新值</el-button>
    </div>
</template>
<script>
    import CountTo from '@/components/countTo'
    export default {
        name: "count_to",
        components: {
            CountTo
        },
        data() {
            return {
                endVal: 1000
            }
        },
        computed: {
            // 返回自定义样式
            getClass() {
                return ['count-to-number']
            }
        },
        methods: {
            getNumber() {
                let number = this.$refs.countTo.getCount();
                this.$message({
                    message: '当前数值为：' + number,
                    type: 'success'
                });
            },
            updateVal() {
                this.endVal += Math.random() * 100
            }

        }
    }
</script>
<style scoped>
body{
        font-size: 24px;
}
    .count_class {
        margin-top: 50px;
    }

    .count-to-number {
        font-size: 8em;
        color: #4d63bc;
        font-weight: 300;
    }

    .prefix-style {
        font-size: 2em;
    }
</style>
